<template>
	<view class="list">
		<view class="header spaceBetween">
			<view class="title">
				添加核心产品
			</view>
			<view class="btn" @click="add">
				+新增
			</view>
		</view>
		<view class="item" v-for="i,index in list">
			<view class="title">
				产品{{index+1}}
			</view>
			<goodsImgs @changeList="changeList" :index="index" :listData="i.product_img"></goodsImgs>
			<view class="title">
				产品名称
			</view>
			<inp class="inp" placeholder="请输入产品名称" v-model="i.product_name" name="product_name" :index="index" :value="i.product_name"
				@input="product_nameChange" />
			<view class="title">
				产品介绍
			</view>
			<inp class="inp" placeholder="请输入产品介绍"  v-model="i.product_desc"  name="product_desc" :index="index" :value="i.product_desc"
				@input="product_descChange"></inp>
		</view>
	</view>
</template>

<script>
	import inp from "./inp.vue"
	import goodsImgs from "./goodsImgs.vue"
	export default {
		name: "goods",
		components: {
			goodsImgs,
			inp
		},
		props:{
			listData:{
				type:Array,
				default:()=>[]
			}
		},
		watch:{
			listData(newVal){
				this.list=newVal;
			}
		},
		data() {
			return {
				list: []
			};
		},

		methods: {
			changeList({
				list,
				index
			}) {
				console.log(this.list[index],list,"list")
				this.list[index].product_img = list;
				this.$emit('changProduct', this.list)
			},
			product_nameChange({str,index}) {
				this.list[index].product_name =str;
					this.$emit('changProduct', this.list)
			},
			product_descChange({str,index}) {
				this.list[index].product_desc =str;
				this.$emit('changProduct', this.list)
			},
			add() {
				this.list.push({
					product_img: null,
					product_desc: null,
					product_name: null,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		width: $connet-width;

		.header {
			width: $connet-width;
			margin-bottom: 20rpx;

			.title {
				font-size: $uni-font-size-12;

			}

			.btn {
				font-size: $uni-font-size-10;
				border-radius: calc(10px + 10rpx);
				padding: 10rpx;
				color: #fff;
				background: $price-color;
			}
		}

		.item {
			border: 1rpx solid #DDDDDD;
			padding: $submargin-width;
			margin-bottom: $submargin-width;
			.title {
				font-size: $uni-font-size-12;
				margin: 30rpx 0 20rpx;
			}
			.subtitle {
				color: #999999;
				font-size: $uni-font-size-10;
				margin-bottom: 20rpx;
			}

			.inp {
				// text-align: right;
				font-size: $uni-font-size-17;
				width: 100%;
				margin-bottom: 30rpx;
				padding: 0;
			}
		}
	}
</style>